!<template>
  <div class="detail_box">
    <div class="title">
      <div>{{form.pstitle}}</div>
    </div>
    <div class="operateBtn">
      <!-- v-if="!userInfo.userName.includes('admin')" -->
      <el-button  size="mini" v-hasRole="['common']" :disabled="form.sign == 1" type="success" @click="handerSign" >{{form.sign == 1 ? '已签收':'签收'}}</el-button>
      <el-button size="mini" v-hasRole="['admin','conservator']" @click="handlrAttention()" type="warning">{{form.isAttention == 1 ? '取消关注':'关注'}}</el-button>
      <el-button size="mini" :disabled="form.psStatus == 5" v-hasRole="['common']"  @click="handlrDrawer" type="primary">{{form.psStatus == 5 ? '已处置':'处置'}}</el-button>
    </div>
    <el-form class="left_from" ref="form" :model="form"  label-width="80px" :disabled="true">

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="链接" prop="linkUrl">
              <el-input v-model="form.linkUrl" placeholder="请输入链接"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="媒体类型" prop="mediaType">
              <el-select style="width: 100%;" v-model="form.mediaType" placeholder="请选择媒体类型">
                <el-option
                  v-for="dict in dict.type.ps_media"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="信源范围" prop="sourceRange">
              <el-select style="width: 100%;" v-model="form.sourceRange" placeholder="请选择信源范围">
                <el-option
                  v-for="dict in dict.type.ps_message"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="倾向性" prop="tendentiousness">
              <el-select style="width: 100%;" v-model="form.tendentiousness" placeholder="请选择倾向性">
                <el-option
                  v-for="dict in dict.type.ps_tendentiousness"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
           </el-col>
          </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="来源网站" prop="srcWebset">
              <el-input v-model="form.srcWebset" placeholder="请输入来源网站"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item  label="发布日期" prop="releaseTime">
              <el-date-picker clearable
                              v-model="form.releaseTime"
                              type="date"
                              style="width: 100%;"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择发布日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="舆情属地" prop="releaseArea">
              <el-select style="width: 100%;" v-model="form.releaseArea" placeholder="请选择舆情属地">
                <el-option
                  v-for="dict in dict.type.ps_possession"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="舆情分类" prop="pscategory">
              <el-select style="width: 100%;" v-model="form.pscategory" placeholder="请选择舆情分类">
                <el-option
                  v-for="dict in dict.type.ps_category"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="涉及问题" prop="issuesInvolved">
              <el-select style="width: 100%;" v-model="form.issuesInvolved" placeholder="请选择涉及问题">
                <el-option
                  v-for="dict in dict.type.ps_industry"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" style="width: 31%">
            <el-form-item label="应对策略" prop="strategies" style="width: 120%">
              <el-select style="width: 100%;" v-model="form.strategies" placeholder="请选择应对策略">
                <el-option
                  v-for="item in strategyList"
                  :key="item.id"
                  :label="item.strategy_name"
                  :value="parseInt(item.id)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              size="mini"
              :disabled="single"
              @click="handleSelect"
            >查看
            </el-button>
          </el-col>
        </el-row>


        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="关键字" prop="keywords">
              <el-input v-model="form.keywords" placeholder="请输入关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="舆情等级" prop="pslevel">
              <el-select style="width: 100%;" v-model="form.pslevel" placeholder="请选择舆情等级">
                <el-option
                  v-for="dict in dict.type.ps_grade"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="作者" prop="newsAuthor">
              <el-input v-model="form.newsAuthor" placeholder="请输入作者"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="舆情内容">
          <editor ref="editorSon"  v-model="form.pscontent" :height="200"/>
        </el-form-item>

        <el-form-item v-hasRole="['admin','conservator']" label="处置情况:" style="margin-top:40px">
        	<div class="table_list">
        	  <el-table
        		  :data="tableData"
        		  border
              max-height="400"
        		  style="width: 100%">
        		  <el-table-column
        			prop="unitName"
        			label="处置单位"
        			min-width="200"
        			show-overflow-tooltip
        			>
        		  </el-table-column>
        		  <el-table-column
        			prop="status"
        			label="处置状态"
        			min-width="160">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">待接收</span>
                  <span v-if="scope.row.status == 1">已读</span>
                  <span v-if="scope.row.status == 2">已签收</span>
                  <span v-if="scope.row.status == 3">已处置</span>
                  <span v-if="scope.row.status == 4">退回</span>
                </template>
        		  </el-table-column>

        		  <el-table-column
        			prop="dealByName"
        			label="处理人"
        			min-width="160"
        			>
        		  </el-table-column>

        		  <el-table-column
        			label="备注"
        			min-width="400">
        			<template slot-scope="scope">
        				<div v-html="scope.row.dealContent"></div>
        			</template>
        		  </el-table-column>

        		</el-table>
        	</div>
        </el-form-item>


        <el-form-item v-hasRole="['admin','conservator']" label="操作记录:" style="margin-top:30px">
        	<div class="table_list">
        	  <el-table
        		  :data="tableDataTwo"
        		  border
              max-height="400"
        		  style="width: 100%">

        		  <el-table-column
        			prop="dealTime"
        			label="操作时间"
        			min-width="200"
        			show-overflow-tooltip
        			>
        		  </el-table-column>

        		  <el-table-column
        			prop="dealType"
        			label="处理方式"
        			min-width="160">
        		  </el-table-column>

        		  <el-table-column
        			prop="dealByName"
        			label="处理人"
        			min-width="160"
        			>
        		  </el-table-column>

        		  <el-table-column
        			label="备注"
        			min-width="400">
        			<template slot-scope="scope">
        				<div v-html="scope.row.dealContent"></div>
        			</template>
        		  </el-table-column>
        		</el-table>
        	</div>
        </el-form-item>
    </el-form>


      <el-drawer
        title="舆情处置"
        :visible.sync="drawer"
        size="40%"
        >
        <div class="cont_darawer">
          <div class="operate_btn">
             <!-- <el-button
                type="warning"
                plain
                size="mini"
                @click="handlerSendback"
              >退回
              </el-button> -->
              <el-button
                type="success"
                plain
                size="mini"
                @click="handlerSubmit"
              >提交
              </el-button>
          </div>
          <div style="margin-top:20px;">
            <div style="margin-bottom: 10px;">处置内容：</div>
            <editor v-model="disposeContent" :height="260"/>
          </div>
        </div>
      </el-drawer>

      <el-drawer
        title="策略描述"
        :visible.sync="tactics"
        size="40%"
        >
        <div class="cont_darawer">
          <div style="margin-top:20px;">
            <div style="margin-bottom: 10px;">描述内容：</div>
              <editor ref="editorSon" v-model="form.strategyDesc" :height="260"/>
          </div>
        </div>
      </el-drawer>
  </div>
</template>


<script>
  import {getPublicsentiment,specialFocus,getOperatingRecordList,getPublicFeedbackList,getStrategyList,publicsentimentSign,publicsentimentFeedback} from "@/api/publicsentiment/publicsentiment"
  import { listDept } from "@/api/system/dept";
  export default {
    dicts: ['ps_possession', 'ps_message', 'ps_category', 'ps_grade', 'ps_industry', 'ps_tendentiousness', 'ps_media'],
    data(){
      return{
        userInfo:JSON.parse(localStorage.getItem('userinfo')),
        Type:'',
        Id:'',
        form:{},
        tableData:[],
        tableDataTwo:[],
        drawer:false,
        tactics:false,
        //处置内容
        disposeContent:'',
        strategyList:[],
      }
    },
    methods:{
      getList(id){
          let body = {
            id:id,
            taskId:this.taskId
          }
          getPublicsentiment(body).then(response => {
            //获取应对策略数据
            let body = {
              issues_involved:response.data.issuesInvolved
            }
            getStrategyList(body).then(res=>{
              this.strategyList = res
            })
            // console.log(response.data,'数据数据');
            this.form = response.data;
            this.$nextTick(()=>{
              this.$refs.editorSon.Quill.enable(false)
            })
          });
      },
      handlrDrawer(){
        this.drawer = true
        this.disposeContent = ''
      },
      handleSelect(){
        this.tactics = true

      },
      //签收
      handerSign(){
        let id = this.form.id
        publicsentimentSign({psId:id}).then(res=>{
          if(res.code == 200){
            this.$message.success('签收成功')
            this.getList(this.Id)
            this.getPublicFeedbackList()
            this.getOperatingRecordList()
          }
        })
      },
      //退回
      // handlerSendback(){
      //   if(!this.disposeContent){
      //     this.$message.warning('请输入退回原因')
      //   }else{
      //     //当前舆情id
      //      let id = this.form.id
      //      console.log(this.disposeContent,'富文本内容');

      //   }
      // },
      //提交
      handlerSubmit(){
        if(!this.disposeContent){
          this.$message.warning('请输入处置内容')
        }else{
           let body = {
             psId:this.form.id,
             dealContent:this.disposeContent
           }
           publicsentimentFeedback(body).then(res=>{
             if(res.code == 200){
               this.$message.success('提交成功')
               this.drawer = false
               this.getList(this.Id)
               this.getPublicFeedbackList()
               this.getOperatingRecordList()
             }
           })
        }
      },

      //处置情况
      getPublicFeedbackList(){
        getPublicFeedbackList({psId:this.Id}).then(res=>{
          this.tableData = res
        })
      },
      //操作记录
      getOperatingRecordList(){
        getOperatingRecordList({psId:this.Id}).then(res=>{
          this.tableDataTwo = res
        })
      },
      handlrAttention(){
        let body = {
          id:this.form.id,
          isAttention:this.form.isAttention
        }
        specialFocus(body).then(res=>{
          if(res.code == 200){
            this.$message.success('操作成功')
            this.getList(this.Id)
            this.getPublicFeedbackList()
            this.getOperatingRecordList()
          }
        })
      }
    },
    created() {
      this.Type = this.$route.query.type
      this.Id = this.$route.query.id
      this.taskId = this.$route.query.taskId || ''
      this.getList(this.Id,this.Type)
      this.getPublicFeedbackList()
      this.getOperatingRecordList()
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">
.detail_box{
  width: 100%;
  height: calc(100vh - 86px);
  box-sizing: border-box;
  padding: 0 10%;
  overflow-y: auto;
  padding-top: 30px;
  position: relative;
}
.operateBtn{
  position: absolute;
  top:34px;
  right: 10%;
  display: flex;
}
.title{
  width: 100%;
  display: flex;
  justify-content: center;
  font-size:22px;
  color: #333;
  font-weight: 600;
  margin-bottom:40px;
  div{
    max-width:65%;
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //用省略号显示
    white-space:nowrap; //不换行
    margin-right: 20px;
  }
}

.table_list{
		margin-bottom:40px;
	  ::v-deep .el-table__header tr,
	   ::v-deep .el-table__header th {
	     padding: 0;
	     height: 42px;
	     font-size:14px;
	     color: #666;
	     font-weight: 500;
	     background: #F5F7FA !important;
	     border-color: #E6E6E6 !important;
	     text-align: center;
	   }
	   ::v-deep .el-table__body tr,
	     ::v-deep .el-table__body td {
	       padding: 0;
	       height: 42px;
	       font-size: 14px;
	       color: #666;
	       text-align: center;
	   }
	}
  .operate_btn{
    width:18%;
    display: flex;
    justify-content: space-between;
  }
  .cont_darawer{
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    margin-top: 20px;
    padding:0px 20px;
  }

  ::v-deep .el-drawer__header{
    margin-bottom: 0 !important;
    padding-bottom: 20px;
    border-bottom: 1px solid #DBDCDD;
  }
</style>
